<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";

	import {
		onMounted
	} from "vue";
	
	import {
		searchDataZzgz
	} from "@/api/search";
	import {
		addOrUpdateZzgz
	} from "@/api/addOrUpdate";


	const city = window.globalObj.name;
	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};

	const tableData = ref([{
			c1: 1,
			c2: city,
			c3: 'xx',
		},
		{
			c1: 2,
			c2: city,
			c3: 'xx',
		},
		{
			c1: 3,
			c2: city,
			c3: 'xx',
		}
	])


	const editorRef = shallowRef();
	const editorRef1 = shallowRef();
	const editorRef2 = shallowRef();

	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const toolbarConfig2 = {};



	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");
	const mode2 = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataZzgz({
			m: "有关保障"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "装备器材保障")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "物资经费保障")?.v || "";
			valueHtml2.value = data.find((x) => x.k === "信息通信保障")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated2 = (editor) => {
		editorRef2.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"保障任务：主要是筹措补充、调配发放开展政治工作需要的各类装备器材。<br/>保障种类及数量:xx"
	);
	const valueHtml1 = ref(
		"保障任务：主要是筹措补充、调配发放开展政治工作需要的各类生活物资。<br/>生活物资保障标准：米按人日均XXkg，可保障XX天计算。面按人日均XXkg，可保障XX天计算。肉按人日均XXkg，可保障XX天计算。鱼按人日均XXkg，可保障XX天计算。蛋按人日均XXkg，可保障XX天计算。禽按人日均XXkg，可保障XX天计算。蔬菜按人日均XXkg，可保障XX天计算。水果按人日均XXkg，可保障XX天计算。食用油按人日均XXkg，可保障XX天计算。食盐按人日均XXkg，可保障XX天计算。奶按人日均XXkg，可保障XX天计算。饮用水按人日均XXkg，可保障XX天计算。<br/>救灾物资保障标准：帐篷XX人1顶,净水器XX人1个,简易厕所XX人1个,沐浴房XX人1个,应急灯XX人1个,应急食品XX人1份,饮用水1人XX瓶,折叠床、棉被、毛毯、毛巾被、蚊帐、凉席、棉衣、秋衣等1人XX件。<br/>经费保障标准：①生活物资保障经费：按每人每天XX元标准保障；②行动保障经费：按实际消耗计领。<br/>保障方式：依托执行任务单位所在县（区）、街道（乡镇）、社区实施保障，所需经费请领上级专项补助。"
	)
	const valueHtml2 = ref(
		"保障任务：主要保障开展政治工作全过程的指挥通信畅通，以及信息的传输。<br/>保障方式：①依托执行任务所在行政区人防指挥所的人防指挥信息系统保障涉密信息传输；②依托人防超短波集群对政治工作相关专业队伍实施现地通信保障；③依托民用通信设施常规通联保障。"
	)
	
	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateZzgz({
					m: "有关保障",
					data: [{
							k: "装备器材保障",
							v: valueHtml.value,
						},
						{
							k: "物资经费保障",
							v: valueHtml1.value,
						},
						{
							k: "信息通信保障",
							v: valueHtml2.value,
						}
					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	onMounted(() => {
		initHtml();
	});
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		const editor2 = editorRef2.value;
		if (!editor) return;
		if (!editor1) return;
		if (!editor2) return;
		editor.destroy();
		editor1.destroy();
		editor2.destroy();

	});
</script>
<template>
	<div>
		<div class="">
			主要明确装备器材、物资经费、信息通信等保障工作的要点。
		</div>
		<FirstTitle name="装备器材保障" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<!-- <div class="top-15  text-center">{{ city }}装备器材保障计划表</div>
		<el-table id="table" :data="tableData" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="c1" label="序号" width="60" align="center" />
			<el-table-column prop="c2" label="装备器材名称" />
			<el-table-column prop="c3" label="数量" />
		</el-table> -->

		<FirstTitle name="物资经费保障" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>


		<FirstTitle name="信息通信保障" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef2" :defaultConfig="toolbarConfig2"
				:mode="mode2" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml2" :defaultConfig="editorConfig"
				:mode="mode2" @onCreated="handleCreated2" />
		</div>






		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>